<template>
	<div class="tabbar">
		<div v-for="(item,index) in tabBar" :key="item.url" class="tab-item" @click="navTo(item.url,index)">
			<div class="text" v-show="index !== 2" :class="{'active':item.url == currentPage}">{{item.text}}
				<!-- <div class="unread" v-if="index == 3 && userInfo.unreadCount > 0">{{userInfo.unreadCount}}</div> -->
				<uni-badge v-if="index == 3 && userInfo.unreadCount > 0" class="unread" :inverted="true"
					:text="userInfo.unreadCount"
					:customStyle="{background: 'linear-gradient(180deg, #ED6D0C 0%, #F98922 100%)'}"></uni-badge>
			</div>
			<!-- hang+ -->
			<div class="hang-item" v-show="index == 2">
				<image :src="item.url == currentPage?item.imgClick:item.img" mode=""></image>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import navigationBar from './navigationBar.vue';
	import uniBadge from './uni-badge.vue';
	export default {
		props: {
			currentPage: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				tabBar: [{
						url: '/pages/index/index',
						text: '首页',
						img: '/static/tab/icon_shouye_n.png',
						imgClick: '/static/tab/icon_shouye_s.png'
					},
					{
						url: '/pages/index/sameCity',
						text: '广场',
						img: '/static/tab/icon_tongcheng_n.png',
						imgClick: '/static/tab/icon_tongcheng_s.png'
					},
					{
						url: '/pages/my/send',
						text: '添加发布',
						img: '/static/tab/icon_fabu.png',
						imgClick: '/static/tab/icon_fabu.png'
					},
					{
						url: '/pages/index/advisoryList',
						text: '消息',
						img: '/static/tab/icon_xiaoxi_n.png',
						imgClick: '/static/tab/icon_xiaoxi_s.png'
					},
					{
						url: '/pages/my/index',
						text: '我',
						img: '/static/tab/icon_wode_n.png',
						imgClick: '/static/tab/icon_wode_s.png'
					}
				],
				level: ''

			};
		},
		mounted() {

		},
		created() {
			uni.hideTabBar({})
		},
		computed: {
			...mapState(['navigationBarHeight', 'userInfo', 'unreadCount']),
		},
		components: {
			navigationBar,
			uniBadge
		},
		watch: {},
		methods: {
			navTo(urls, index) {
				console.log("地址", urls)
				if (index !== 2) {
					uni.switchTab({
						url: urls
					})
				} else {
					uni.navigateTo({
						url: urls
					})
				}

				wx.vibrateShort()

			}
		}
	}
</script>

<style scoped lang="scss">
	//导航栏设置

	.tabbar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		position: fixed;
		background: #FFFFFF;
		bottom: 0;
		height: 120rpx;
		z-index: 99;
		// box-shadow: 0px -2rpx 2rpx 0rpx rgba(0, 0, 0, 0.05);
		// border-top: 1rpx solid rgba(216, 216, 216, 1);
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
		box-sizing: content-box;

		.tab-item {
			box-sizing: border-box;
			position: relative;
			width: 80rpx;

			.text {
				white-space: nowrap;
				font-size: 30rpx;
				font-weight: normal;
				line-height: 28rpx;
				text-align: center;
				color: #666;
			}

			.tab-img {
				width: 50rpx;
				height: 50rpx;
				box-sizing: border-box;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.active {
			color: #000000 !important;
			font-size: 36rpx !important;
		}

		.hang-item {
			box-sizing: border-box;
			background: #fff;
			border: 1px solid #ececec;
			border-right: none;
			border-bottom: none;
			border-left: none;

			image {
				width: 90rpx;
				height: 66rpx;
			}
		}

	}

	.unread {
		position: absolute;
		bottom: 20rpx;
		right: -15rpx;

	}
</style>